<!-- 背脊模板样式 -->
<template>
  <div class="container flex justify-center align-center flex-wrap">
    <ul
      class="frame"
      v-for="(x, index) in data"
      :key="index"
      :style="{ 'page-break-after': 'always', width: CmToPx(x.boxWidth) + 'px' }"
    >
      <li
        v-for="(item, index) in title"
        :key="index"
        :style="{ width: CmToPx(x.boxWidth) + 'px' }"
        class="top-line"
      >
        <div>{{ item.fieldTitle }}</div>
        <div class="content" v-show="IsShowDictItemLabel(item.fieldName)">
          {{ getValueLabel(item.fieldName, x[toCamelCase(item.fieldName)]) }}
        </div>
        <div v-show="!IsShowDictItemLabel(item.fieldName)" class="content">
          {{ x[toCamelCase(item.fieldName)] }}
        </div>
      </li>
    </ul>
    <ul class="frame" v-if="data.length == 0">
      <li v-for="(item, index) in title" :key="index" class="top-line">
        <div>{{ item.fieldTitle }}</div>
        <div class="content">123456</div>
      </li>
    </ul>
  </div>
</template>

<script>
import toCamelCase from '@/utils/toCamelCase.js'
import { getDictItemsByCodes } from '@/api/sys/dict'

export default {
  name: 'BackboneStyle',
  components: {},
  props: {
    title: {
      type: Array,
      default: () => {
        return []
      },
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      dictOption: {},
      dictValue: [],
    }
  },
  computed: {
    toCamelCase() {
      return function (str) {
        return toCamelCase(str)
      }
    },
    // 是否显示字典项label
    IsShowDictItemLabel() {
      return function (val) {
        let nonEmptyKeys = Object.keys(this.dictOption).filter(
          (key) => Array.isArray(this.dictOption[key]) && this.dictOption[key].length > 0
        )

        // 判断nonEmptyKeys中是否有val
        let hasMatch = nonEmptyKeys.includes(val)

        return hasMatch
      }
    },
    getValueLabel() {
      return function (field, val) {
        let foundLabel = this.dictOption[field]?.find((item) => item.value == val)?.label
        return foundLabel
      }
    },
  },
  watch: {
    title(newVal) {
      if (newVal.length > 0) {
        this.changeData()
      }
    },
  },
  created() {},
  mounted() {
    // this.changeData()
  },
  methods: {
    CmToPx(cm, dpi = 72) {
      const inchesPerCm = 1 / 2.54 // 1 cm = 1/2.54 inch
      // 四舍五入pxs
      const pxs = cm * dpi * inchesPerCm
      return Math.round(pxs)
    },
    // 根据字典编码来获取字典数据
    getDictItemsByCode(dictCode) {
      getDictItemsByCodes(dictCode).then((res) => {
        if (res.data.code === 200) {
          this.dictOption = res.data.data
        } else {
          this.$message.warning(res.data.message)
        }
      })
    },
    // 改变数据
    changeData() {
      // this.$nextTick(() => {
      let dict = []
      this.title.forEach((f) => {
        const camelCaseFieldName = toCamelCase(f.fieldName)
        dict.push(f.fieldName)
        if (this.data[0] && this.data[0][camelCaseFieldName] !== undefined) {
          this.$set(f, 'value', this.data[0][camelCaseFieldName])
          // f.value = this.data[0][camelCaseFieldName]
        }
      })
      this.getDictItemsByCode(dict)

      // })
    },
  },
}
</script>
<style lang="less" scoped>
ul {
  li {
    &:last-child {
      border-bottom: 2px solid #13196b;
    }
  }
}
.frame {
  height: 100%;
  border: 1px solid #000;
  padding: 10px 20px;
  text-align: justify;
  text-align-last: justify;
  font-size: 20px;
  margin: 10px;
}
.line {
  color: #13196b;
}
.top-line {
  color: #13196b;
  border-top: 2px solid #13196b;
}
.content {
  margin-top: 20px;
  min-height: 30px;
  width: 100%;
}
</style>
